<template>
  <div>
    <div class="PageContent" v-for="data in content">
      <div class="PageContentMain">
        <div class="userInfo">
          <div class="userDetails">
            <div class="userPortrait" v-if="data.get_user.user_info"><img :src="data.get_user.user_info[0].port"></div>
            <div class="userPortrait" v-else></div>
            <div class="TimeName">
              <h5>{{data.get_user.name}}</h5>
              <p>时间</p>
            </div>
          </div>
          <div class="more"><img src="../../public/img/更多.png"></div>
        </div>
        <div class="App">
          <div>
            <div class="editor"><img src="../../public/img/应用.png"><span>tinymce-editor</span></div>
            <div class="editor editorT"><img src="../../public/img/地址.png"><span>中国</span></div>
          </div>
          <div>
            <div class="Collection AppRight"><img src="../../public/img/收藏2.png"></div>
            <div class="news AppRight"><img src="../../public/img/消息2.png"></div>
          </div>
        </div>
        <h4 style="text-align:center" ref="text">{{data.title}}</h4>
        <!-- <div class="classification">
          <div>
            <img src="../../public/img/文件夹.png"><span>{{data.get_directory.name}}</span>
          </div> <span>{{data.count}}/{{data.currentKey}}</span>
        </div> -->
        <div class="PageText" v-html="data.content" id="text"></div>
        <!-- <div class="PageLabel">
          <div>PHP</div><div>javaScript</div><div>CSS</div><div>HTML</div><div>数据结构</div>
        </div> -->

      </div>
      <div class="PageFooter">
        <div class="PageFooterMain">
          <div class="PageFooterLeft">
            <div class="PageLike">
              <div><img src="../../public/img/喜欢.png"><span>喜欢</span></div><div class="userLike"><div  v-for="item in HandelPort(data.get_user_like)"><img :src="item.get_user[0].port"></div><span v-if="data.get_user_like.length > 3">......</span><div class="userLikeNum">{{data.get_user_like_count_count}}</div></div>
            </div>
            <div class="comment">
               <div><img src="../../public/img/评论2.png"><span>评论&nbsp;&nbsp;{{data.get_comment_count}}</span></div>
            </div>
          </div>
          <div class="PageFooterRight">
            <div class="comment">
              <div><img src="../../public/img/查看.png"><span>浏览&nbsp;&nbsp;{{data['get_browse_count']}}</span></div>
            </div>
          </div>
        </div>
      </div>
      <div class="commentFather">
        <div class="commentContent">
          <div class="commentList" v-for="value in comment">
            <div class="commentHead">
              <div class="commentTou"><img :src="value.port"></div>
              <div class="commentName">
                <h5>{{value.uname}}</h5>
                <p>时间</p>
                <div class="commentSpk">{{value.content}}</div>
                <div class="reply" @click="reply(value.lid,value.uid,value.uname,value.id)">回复</div>
                <div class="commentChild" v-if="value.child &&  judeHide(value.id)">

                  <div class="commentList" v-for="item in value.child">
                    <div class="commentHead">
                      <div class="commentTou"><img :src="item.port"></div>
                      <div class="commentName">
                        <h5 v-if="item.pid == value.id">{{item.uname}}</h5>
                        <h5 v-else>{{item.uname}}&nbsp;回复 {{item.hname}}</h5>
                        <p>时间</p>
                        <div class="commentSpk">{{item.content}}</div>
                        <div class="reply" @click="reply(value.lid,value.uid,value.uname,item.id)">回复</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="value.child && judeHide(value.id)" @click="addHide(value.id)" class="text">收起</div>
                <div v-else-if="value.child && !judeHide(value.id)" @click="addHide(value.id)" class="text">查看更多回复</div>
              </div>
            </div>
          </div>
          <div class="commentSend">
            <div class="SendTou"></div>
            <div class="Send"><input type="text" :placeholder="Tips" v-model="userContent"></div>
            <button class="SendButton" @click="sendComment()">发送</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BlogDetails",
  data() {
    return {
      content: '',
      hid: 0,
      userContent: '',
      lid: 0,
      comment:[],
      pid:0,
      Tips:'说点什么吧~',
      judeArr:[],
      text:'查看更多回复',
      title:[],
      updatedJude:false,
    }
  },
  methods: {
     HandelPort(arr){
       console.log(arr);
      var atm = []
      for (let i =0;i<arr.length;i++){
               if(i == 3){
                 return atm
               }
         atm.push(arr[i])
      }
      return atm
    },
    reply(lid,uid,uname,id){
      this.lid = lid;
      this.hid = uid;
      this.Tips = '回复'+ uname
      this.pid = id;
    },
    judeHide(index){
          let jude =   this.judeArr.indexOf(index);
          return jude == -1 ? false : true
    },
    addHide(index){
      if(this.judeArr.indexOf(index) == -1){
        this.judeArr.push(index);
      }else{
        let num = this.judeArr.indexOf(index);
        this.judeArr.splice(num,1);
      }

    },
    sendComment() {
      const id = this.$route.query.id;
      var request = this.myCode();
      var config = {
        method: 'get',
        url: '/BlogCommentSend',
        params: {
          hid: this.hid,
          content: this.userContent,
          did: id,
          pid:this.pid,
          lid: this.lid,
          api_token: localStorage.getItem('API')
        }
      };
      request(config).then((res) => {
        this.getComment();
      })
    },
    getComment(){
      const id = this.$route.query.id;
      var request = this.myCode();
      var configThree = {
        method: 'get',
        url: '/GetComment',
        params: {
          id:id
        }
      }
      request(configThree).then((res) => {
        this.comment = res.data.data;
      })
    }
  },

  created() {
    const id = this.$route.query.id;
    var request = this.myCode();
    var config = {
      method: 'get',
      url: '/GetBlogContent',
      params: {
        id: id
      }
    };
    request(config).then((res) => {
      this.content = res.data.data;
    })
    var configTo = {
      method: 'get',
      url: '/SetBrowse',
      params: {
        id: id
      }
    };
    request(configTo).then((res) => {
    })
    this.getComment();
  },

  updated(){
    if(this.updatedJude == false){

     this.$nextTick(()=>{

   let text =  document.getElementById('text');
   let child = text.children;
 
   for(let i =0;i<child.length;i++){

            if(child[i].nodeName == 'DIV'){
              child[i].style.overflow='auto';
          }
   

       if(child[i].nodeName.slice(0,1) == 'H'){
           child[i].id = 'h-'+i; 
           let num =  child[i].nodeName.slice(1,2);
           let content = child[i].innerHTML;
           this.title.push({'id':'h-'+i,num,content})    
       }
   }




     })

     this.$store.commit('SetTitleData',this.title);
    }
     this.updatedJude = true;
     
  },
  computed:{
         countIdFun(){
            return this.$store.state.countId;
         }
  },
  watch:{
      countIdFun(val){
      document.getElementById(val).scrollIntoView()
      }
  }
}
</script>

<style scoped>



.BlogDetails{
  background-color: white;
  margin-top: 20px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05)
}
.BlogDetailsContent{
     width: 98%;
     margin: 0 auto;
  padding-top: 20px;
   }
.BlogDetailsContent>h2{
   font-family: 微軟正黑體;
  line-height: 40px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  color: white;
  background-color: #4d545c;
}
#text{
  font-family: 微軟正黑體
}
#text>>>p{
  margin-bottom: 20px;
  font-weight: 400;
  font-size: 14px;
  line-height: 2;
  margin-top: 10px;
}
#text>>>ul{
  margin-top: 20px;
}
#text>>>ul>li{
    width: 90%;
    margin-left: 20px;
}
#text>>>ol{
  margin-top: 20px;
}
#text>>>ol>li{
  font-size: 14px;
  width: 90%;
  line-height: 2;
  margin-left: 20px;
}
#text>>>h1,#text>>>h2,#text>>>h3,#text>>>h4,#text>>>h5,#text>>>h6{
  margin-top: 20px;
  border-radius: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}
#text>>>pre{
  overflow: auto;
  margin-top: 10px;
}
/* #text>>> div{
 overflow: auto;
} */
.info{
  background-color: #4d545c;
  height: 100px;
  border-radius: 5px;
}
.cnblogs_code pre span{
  font-size: 20px !important;
}




.PageContent{
  background-color: white;
  margin-top: 30px;
}
.PageContentMain{
  width: 90%;
  margin: 0 auto;
  margin-bottom:50px
}
.PageContentMain{
  padding-top: 30px;
}
.userDetails{
  display: flex;
}
.userInfo{
  display: flex;
  justify-content: space-between;
}
.more{
  display: flex;
  align-items: center;
}
.more img{
  width: 30px;
}
.TimeName{
  margin-left: 20px;
  font-family: 微軟正黑體;
}
.userPortrait{
  width: 50px;
  height: 50px;
  background-color: #555555;
  border-radius: 50%;
  overflow: hidden;
}
.userPortrait img{
  width: 100%;

}
.TimeName p {
  margin-top: 3px;
  font-size: 13px;
  color: #6d737b;
}
.App{
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.editor{
  display: flex;
  align-items: center;
  font-family: "Arial Hebrew", Arial, sans-serif;
  font-size: 13px;
}
.editor img{
  width: 15px;
}
.editor span{
  margin-left: 5px;
  color: #6d737b;
}
.App>div{
  display: flex;
}
.editorT{
  margin-left: 20px;
}
.Collection{
  background-color: #00d084;
  margin-right: 10px;
}
.Collection img{
  width: 25px;
}
.AppRight{
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.news{
  background-color: #df7d43;
}
.news img{
  width: 20px;
}
.PageContentMain>h4{
  margin-top: 15px;
  font-size: 15px;
  font-family: 微軟正黑體;
  margin-bottom: 30px;
}
.classification{
  display: flex;
  margin-top: 15px;
}
.classification>div{
  background-color: #4d545c;
  color: white;
  display: flex;
  font-size: 11px;
  padding-top: 5px;
  padding-bottom: 3px;
  border-radius: 10px;
  padding-left: 5px;
  padding-right: 5px;
}
.classification img{
  width: 15px;
}
.classification>span{
  display: flex;
  align-items: center;
  margin-left: 40px;
  font-size:15px;
  color: #6d737b;
}
.PageText{
  margin-top: 10px;
  line-height: 25px;
  font-family: 微軟正黑體;
}
.PageText span{
  color: #555555;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
}
.PageLabel{
  display: flex;
  margin-top: 20px;
  padding-bottom: 40px;
}
.PageLabel>div{
  background-color: #cdcdcd;
  padding: 5px 10px 5px 10px;
  border-radius: 12px;
  color: #707070;
  font-size: 12px;
  font-family: 微軟正黑體;
}
.PageLabel>div:nth-child(n+2){
  margin-left: 15px;
}
.PageFooter{
  border-top: 1px #e6e6e6 solid;
}
.PageFooterMain{
  width:90%;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.PageFooterLeft{
  display: flex;
}
.comment{
  margin-left: 20px;
}
.PageLike,.comment{
  display: flex;
  font-size: 14px;
  font-family: 微軟正黑體;
  align-items: center;
}
.PageLike>div,.comment>div{
  display: flex;
  align-items: center;
  /*box-sizing: border-box;*/
}
.PageLike span,.comment span{
  margin-left: 5px;
  vertical-align: top;
}
.PageLike img{
  width: 20px;
}
.comment img{
  width: 20px;
}
.userLike{
  display: flex;
  margin-left: 10px;
}
.userLike>div{
  background-color: #555555;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  overflow: hidden;
}
.userLike>div img{
  width: 100%;
  min-height: 100%;
}
.userLike>div:nth-child(n+2){
  margin-left: -20px;
}
.userLike .userLikeNum{
  background-color: #e04e38;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: "Arial Hebrew", Arial, sans-serif;
}
.commentFather{
  border-top:  1px #e6e6e6 solid;
}
.commentContent{
  width: 90%;
  margin: 0 auto;
}
.commentHead{
  display: flex;
}
.commentTou{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #555555;
  overflow: hidden;
}
.commentTou img{
  width: 100%;
}
.commentName{
  margin-left: 10px;
  font-family: 微軟正黑體;
}
.commentName p{
  margin-top: 3px;
  font-size: 12px;
}
.commentSpk{
  margin-top: 15px;
  font-size: 13px;
}
.reply{
  margin-top: 10px;
  font-size: 13px;
  color: #5f1b29;
  cursor: pointer;
}
.commentList{
  margin-top: 40px;
}
.commentSend{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  padding-bottom: 20px;
}
.SendButton{
  background-color: #303030;
  border: none;
  height: 45px;
  width: 60px;
  color: white;
  border-radius: 4px;

}
.commentSend .SendTou{
    width: 40px;
  height: 40px;
  background-color: #555555;
  border-radius: 50%;
}
.Send input{
  width: 580px;
  height: 40px;
  background-color: #f1f1f1;
  border: 1px solid  #D8DEE6;
  font-size: 12px;
  border-radius: 3px;
  padding-left: 10px;
}
.text{
  font-size: 13px;
  text-align: center;
  margin-top: 15px;
  cursor: pointer;
}
.PageText>>>img{
  max-width: 80% !important;
  height: auto !important;
  text-align: center !important;
}

</style>